<template>
    <view :class="['nav']" :style="{height:`${clientRect.height}px`, 'padding-top':`${clientRect.top}px`}">
        <view class="title">
            {{title}}
        </view>
        <view class="left" :style="{left:`${clientRect.right}px`, height:`${clientRect.height}px`,
			'border-radius': `${clientRect.height/2}px`}">
            <view class="back" @click="handleBack">
                <image class="img" src="/static/img/view/back.png" mode="widthFix"></image>
            </view>
            <view class="center">|</view>
            <view class="homekaytix" @click="handleHome">
                <image class="img" src="/static/img/view/homekaytix.svg" mode="widthFix"></image>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        navigateBack
    } from '@/scripts/compatible/pageOptions.js'
    import {
        height,
        top,
        right,
    } from '@/scripts/compatible/clientRect.js'
    export default {
        props: {
            title: {
                type: String,
                require: true,
            },
            customStyle: {
                type: String,
            },
        },
        data() {
            return {
                clientRect: {
                    height: 32,
                    top: 24,
                    right: 8,
                },
            }
        },
        mounted() {
            this.clientRect_init()
        },
        methods: {
            handleBack() {
                navigateBack()
            },
            handleHome() {
                uni.reLaunch({
                    url: '/pages/index/index'
                })
            },
            clientRect_init() {
                const clientRect = {
                    height,
                    top,
                    right,
                }
                this.$set(this, 'clientRect', clientRect)
            },
        },
    }
</script>

<style lang="scss" scoped>
    .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding-bottom: 12px;
        z-index: 6;

        .bg {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .title {
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            color: #fff;
            width: max-content;
            height: 32px;
            display: flex;
            align-items: center;
            font-size: 16px;
            max-width: 50%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            direction: rtl;
            padding: 0 20px;
            box-sizing: border-box;
            display: block;
            line-height: 32px;
        }

        .left {
            position: absolute;
            margin: auto;
            background-color: rgba(0, 0, 0, .2);
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 6px 0;
            box-sizing: border-box;
            width: max-content;

            .center {
                color: #fff;
            }

            .back,
            .homekaytix {
                width: 20px;
                padding: 0 10px;
            }

            .img {
                display: block;
                width: 100%;
            }
        }
    }
</style>